<template>
    <el-form ref="searchElformRef" :model="queryParams" :inline="true" label-width='90px'>
        <el-form-item label="受理单号" prop="businessNo">
            <el-input v-model="queryParams.businessNo" placeholder="请输入" clearable style="width: 200px" maxlength="30" />
        </el-form-item>
        <el-form-item label="设备种类" prop="device">
            <el-select v-model="queryParams.device" placeholder="请选择" clearable style="width: 200px">
                <el-option v-for="(item, idx) in deviceClassList" :key="idx" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="recStatus">
            <el-select v-model="queryParams.recStatus" placeholder="请选择" clearable style="width: 200px">
                <el-option v-for="(item, idx) in props.statusList" :key="idx" :label="item.text" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item label="报检单号" prop="inspectionNo">
            <el-input v-model="queryParams.inspectionNo" placeholder="请输入" clearable style="width: 200px" maxlength="30" />
        </el-form-item>
        <el-form-item label="检测员" prop="detectionUserId">
            <el-select v-model="queryParams.detectionUserId" placeholder="请选择" clearable style="width: 200px">
                <el-option v-for="(item, idx) in userList" :key="idx" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="监测机构" prop="detectId">
            <el-select v-model="queryParams.detectId" placeholder="请选择" clearable style="width: 200px">
                <!-- <el-option label="电梯" value="电梯" />
                <el-option label="扶梯" value="扶梯" /> -->
            </el-select>
        </el-form-item>
        <el-form-item label="记录编号" prop="code">
            <el-input v-model="queryParams.code" placeholder="请输入" clearable style="width: 200px" maxlength="30" />
        </el-form-item>
        <el-form-item label="使用单位" prop="customerName">
            <el-input v-model="queryParams.customerName" placeholder="请输入" clearable style="width: 200px" maxlength="30" />
        </el-form-item>

        <div v-if='isOpenSerch' class="flex-flow">
            <el-form-item label="设备型号" prop="productIdentifier">
                <el-input v-model="queryParams.productIdentifier" placeholder="请输入" clearable style="width: 200px" />
            </el-form-item>
            <el-form-item label="设备类别" prop="categoryId">
                <el-select v-model="queryParams.categoryId" placeholder="请选择" clearable style="width: 200px">
                    <el-option v-for="(item, idx) in deviceCategoryList" :key="idx" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="设备品种" prop="device">
                <el-select v-model="queryParams.device" placeholder="请选择" clearable style="width: 200px">
                    <el-option v-for="(item, idx) in varietyList" :key="idx" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="注册代码" prop="registrationCode">
                <el-input v-model="queryParams.registrationCode" placeholder="请输入" clearable style="width: 200px" />
            </el-form-item>
        </div>

        <el-form-item v-if='isOpenSerch' label="使用登记证号" prop="registrationNo" label-width='120px'>
            <el-input v-model="queryParams.registrationNo" placeholder="请输入" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item v-if='isOpenSerch' label="产品(出厂)编号" prop="factoryNo" label-width='120px'>
            <el-input v-model="queryParams.factoryNo" placeholder="请输入" clearable style="width: 240px" />
        </el-form-item>

        <el-form-item style="margin-left: 20px;">
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button type="primary" link @click="isOpenSerch = !isOpenSerch">
                {{ isOpenSerch ? '收起' : '展开' }}
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {
    apiGetDeviceVarietyList,
    apiGetDeviceClassList,
    apiGetDeviceCategoryList,
} from "@/api/common";
import { apiGetDetectionStaffList } from '@/api/staff';

const emits = defineEmits(['doSearch']);

const props = defineProps({
    statusList: {
        type: Array,
        default: () => {
            return []
        },
    },
});

const isOpenSerch = ref(false)
const searchElformRef = ref(null)
const queryParams = ref({})

const varietyList = ref([])
const deviceClassList = ref([])
const deviceCategoryList = ref([])
const userList = ref([])

//检测员列表
const getUserList = () => {
    apiGetDetectionStaffList().then(res => {
        if (res && res.data) {
            userList.value = res.data
        }
    }).catch(err => {

    })
}
//设备品种列表
const getDeviceVariety = () => {
    apiGetDeviceVarietyList().then(res => {
        if (res && res.data) {
            varietyList.value = res.data
        }
    }).catch(err => {

    })
}
//设备种类列表
const getDeviceClass = () => {
    apiGetDeviceClassList().then(res => {
        if (res && res.data) {
            deviceClassList.value = res.data
        }
    }).catch(err => {

    })
}
//设备类别列表
const getDeviceCategory = () => {
    apiGetDeviceCategoryList().then(res => {
        if (res && res.data) {
            deviceCategoryList.value = res.data
        }
    }).catch(err => {

    })
}

getUserList()
getDeviceVariety()
getDeviceClass()
getDeviceCategory()


const resetQuery = () => {
    queryParams.value = {}
    searchElformRef.value.resetFields()
    handleQuery()
}

const handleQuery = () => {
    emits('doSearch', JSON.parse(JSON.stringify(queryParams.value)))
}

</script>
